<template>
  <v-dialog :model-value="visible" @update:model-value="$emit('update:visible', $event)" max-width="900px" persistent>
    <v-card>
      <v-card-title class="d-flex align-center">
        <span>选择图标</span>
        <v-spacer></v-spacer>
        <v-text-field
          v-model="searchText"
          label="搜索图标"
          prepend-inner-icon="mdi-magnify"
          variant="outlined"
          density="compact"
          hide-details
          clearable
          style="max-width: 300px;"
        ></v-text-field>
      </v-card-title>
      
      <v-card-text style="max-height: 600px; overflow-y: auto;">
        <!-- 图标测试区域 -->
        <div class="mb-4 pa-3 bg-blue-lighten-5 rounded">
          <div class="text-subtitle-2 mb-2">图标测试 (验证图标是否正确加载):</div>
          <div class="d-flex gap-2 flex-wrap">
            <div v-for="testIcon in testIcons" :key="testIcon" class="d-flex flex-column align-center pa-2">
              <i :class="'mdi ' + testIcon" style="font-size: 24px; color: #1976d2;"></i>
              <span class="text-caption">{{ testIcon }}</span>
            </div>
          </div>
        </div>

        <!-- 当前选中的图标 -->
        <div v-if="selectedIcon" class="mb-4 pa-3 bg-grey-lighten-4 rounded">
          <div class="text-subtitle-2 mb-2">当前选中:</div>
          <div class="d-flex align-center">
            <v-icon :icon="selectedIcon" size="24" class="mr-3" color="primary"></v-icon>
            <span class="text-body-1">{{ selectedIcon }}</span>
          </div>
        </div>

        <!-- 图标分类标签 -->
        <v-chip-group v-model="selectedCategory" class="mb-4" mandatory>
          <v-chip
            v-for="category in categories"
            :key="category.key"
            :value="category.key"
            variant="outlined"
          >
            {{ category.name }}
          </v-chip>
        </v-chip-group>

        <!-- 图标网格 -->
        <div class="icon-grid">
          <div
            v-for="icon in filteredIcons"
            :key="icon"
            class="icon-item"
            :class="{ 'selected': selectedIcon === icon }"
            @click="selectIcon(icon)"
          >
            <i :class="'mdi ' + icon" style="font-size: 24px;"></i>
            <div class="icon-name">{{ icon }}</div>
          </div>
        </div>

        <!-- 无结果提示 -->
        <div v-if="filteredIcons.length === 0" class="text-center py-8">
          <v-icon icon="mdi-magnify" size="48" color="grey"></v-icon>
          <div class="text-h6 text-grey mt-2">未找到匹配的图标</div>
          <div class="text-body-2 text-grey">请尝试其他搜索关键词</div>
        </div>
      </v-card-text>

      <v-card-actions>
        <v-spacer></v-spacer>
        <v-btn @click="onCancel">取消</v-btn>
        <v-btn color="primary" @click="onConfirm" :disabled="!selectedIcon">确定</v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue';

interface Props {
  visible: boolean;
  modelValue?: string;
}

const props = defineProps<Props>();
const emit = defineEmits(['update:visible', 'update:modelValue', 'confirm']);

const searchText = ref('');
const selectedIcon = ref(props.modelValue || '');
const selectedCategory = ref('common');

// 测试图标 - 用于验证图标是否正确加载
const testIcons = [
  'mdi-home', 'mdi-cog', 'mdi-chart-histogram', 'mdi-account', 'mdi-menu'
];

// 图标分类
const categories = [
  { key: 'common', name: '常用' },
  { key: 'action', name: '操作' },
  { key: 'navigation', name: '导航' },
  { key: 'content', name: '内容' },
  { key: 'device', name: '设备' },
  { key: 'social', name: '社交' },
  { key: 'file', name: '文件' },
  { key: 'editor', name: '编辑' },
  { key: 'communication', name: '通信' },
  { key: 'places', name: '地点' },
  { key: 'system', name: '系统' },
  { key: 'business', name: '商务' }
];

// 图标库 - 按分类组织
const iconLibrary = {
  common: [
    'mdi-home', 'mdi-account', 'mdi-cog', 'mdi-menu', 'mdi-plus', 'mdi-pencil', 'mdi-delete',
    'mdi-magnify', 'mdi-check', 'mdi-close', 'mdi-star', 'mdi-heart', 'mdi-eye', 'mdi-eye-off',
    'mdi-lock', 'mdi-lock-open', 'mdi-key', 'mdi-shield', 'mdi-alert', 'mdi-information',
    'mdi-help', 'mdi-bell', 'mdi-bookmark', 'mdi-calendar', 'mdi-clock', 'mdi-map-marker',
    'mdi-cog', 'mdi-dashboard', 'mdi-view-dashboard', 'mdi-apps', 'mdi-widgets'
  ],
  action: [
    'mdi-plus', 'mdi-minus', 'mdi-pencil', 'mdi-delete', 'mdi-content-save', 'mdi-refresh',
    'mdi-undo', 'mdi-redo', 'mdi-content-copy', 'mdi-content-cut', 'mdi-content-paste',
    'mdi-download', 'mdi-upload', 'mdi-share', 'mdi-print', 'mdi-export', 'mdi-import',
    'mdi-backup-restore', 'mdi-sync', 'mdi-cached', 'mdi-autorenew', 'mdi-update',
    'mdi-settings-backup-restore', 'mdi-restore', 'mdi-archive', 'mdi-unarchive',
    'mdi-play', 'mdi-pause', 'mdi-stop', 'mdi-skip-next', 'mdi-skip-previous',
    'mdi-fast-forward', 'mdi-rewind', 'mdi-replay', 'mdi-shuffle', 'mdi-repeat'
  ],
  navigation: [
    'mdi-chevron-up', 'mdi-chevron-down', 'mdi-chevron-left', 'mdi-chevron-right',
    'mdi-arrow-up', 'mdi-arrow-down', 'mdi-arrow-left', 'mdi-arrow-right',
    'mdi-menu', 'mdi-menu-open', 'mdi-dots-vertical', 'mdi-dots-horizontal',
    'mdi-more-vert', 'mdi-more-horiz', 'mdi-expand-more', 'mdi-expand-less',
    'mdi-unfold-more-horizontal', 'mdi-unfold-less-horizontal', 'mdi-first-page',
    'mdi-last-page', 'mdi-keyboard-arrow-up', 'mdi-keyboard-arrow-down',
    'mdi-keyboard-arrow-left', 'mdi-keyboard-arrow-right', 'mdi-subdirectory-arrow-left',
    'mdi-subdirectory-arrow-right', 'mdi-arrow-top-left', 'mdi-arrow-top-right',
    'mdi-arrow-bottom-left', 'mdi-arrow-bottom-right', 'mdi-arrow-expand-all',
    'mdi-arrow-collapse-all', 'mdi-fullscreen', 'mdi-fullscreen-exit'
  ],
  content: [
    'mdi-format-bold', 'mdi-format-italic', 'mdi-format-underline', 'mdi-format-color-text',
    'mdi-format-align-left', 'mdi-format-align-center', 'mdi-format-align-right',
    'mdi-format-list-bulleted', 'mdi-format-list-numbered', 'mdi-format-quote-close',
    'mdi-link', 'mdi-link-off', 'mdi-image', 'mdi-video', 'mdi-music-note',
    'mdi-attachment', 'mdi-insert-drive-file', 'mdi-folder', 'mdi-folder-open',
    'mdi-create-new-folder', 'mdi-text-box', 'mdi-title', 'mdi-subject',
    'mdi-format-strikethrough', 'mdi-format-clear', 'mdi-format-color-fill',
    'mdi-format-font', 'mdi-format-size', 'mdi-format-line-spacing',
    'mdi-format-indent-increase', 'mdi-format-indent-decrease', 'mdi-table',
    'mdi-grid', 'mdi-view-grid', 'mdi-view-list', 'mdi-view-module'
  ],
  device: [
    'mdi-phone', 'mdi-tablet', 'mdi-laptop', 'mdi-desktop-mac', 'mdi-watch',
    'mdi-tv', 'mdi-speaker', 'mdi-headphones', 'mdi-keyboard', 'mdi-mouse',
    'mdi-camera', 'mdi-videocam', 'mdi-microphone', 'mdi-microphone-off',
    'mdi-volume-high', 'mdi-volume-medium', 'mdi-volume-low', 'mdi-volume-off',
    'mdi-battery-charging', 'mdi-battery-alert', 'mdi-wifi', 'mdi-bluetooth',
    'mdi-cast', 'mdi-airplay', 'mdi-usb', 'mdi-memory', 'mdi-sd',
    'mdi-sim', 'mdi-router-wireless', 'mdi-signal-wifi-4-bar',
    'mdi-signal-cellular-3', 'mdi-battery', 'mdi-power', 'mdi-power-off'
  ],
  social: [
    'mdi-account', 'mdi-account-group', 'mdi-account-plus', 'mdi-account-minus',
    'mdi-account-circle', 'mdi-account-box', 'mdi-face', 'mdi-people',
    'mdi-person-add', 'mdi-group', 'mdi-group-add', 'mdi-supervisor-account',
    'mdi-public', 'mdi-language', 'mdi-location-on', 'mdi-location-off',
    'mdi-mood', 'mdi-mood-bad', 'mdi-sentiment-satisfied', 'mdi-sentiment-dissatisfied',
    'mdi-thumb-up', 'mdi-thumb-down', 'mdi-favorite', 'mdi-favorite-border',
    'mdi-share', 'mdi-share-variant', 'mdi-forum', 'mdi-chat', 'mdi-comment',
    'mdi-comment-outline', 'mdi-feedback', 'mdi-rate-review', 'mdi-star-rate'
  ],
  file: [
    'mdi-folder', 'mdi-folder-open', 'mdi-folder-plus', 'mdi-folder-minus',
    'mdi-file', 'mdi-file-plus', 'mdi-file-minus', 'mdi-file-document',
    'mdi-file-image', 'mdi-file-video', 'mdi-file-music', 'mdi-file-pdf',
    'mdi-file-word', 'mdi-file-excel', 'mdi-file-powerpoint', 'mdi-file-code',
    'mdi-cloud', 'mdi-cloud-upload', 'mdi-cloud-download', 'mdi-cloud-sync',
    'mdi-attachment', 'mdi-paperclip', 'mdi-insert-drive-file', 'mdi-description',
    'mdi-folder-multiple', 'mdi-folder-zip', 'mdi-file-outline', 'mdi-file-tree',
    'mdi-zip-box', 'mdi-archive', 'mdi-package', 'mdi-package-variant'
  ],
  editor: [
    'mdi-format-bold', 'mdi-format-italic', 'mdi-format-underline', 'mdi-format-strikethrough',
    'mdi-format-color-fill', 'mdi-format-color-text', 'mdi-format-paint',
    'mdi-format-size', 'mdi-format-font', 'mdi-format-align-left', 'mdi-format-align-center',
    'mdi-format-align-right', 'mdi-format-align-justify', 'mdi-format-line-spacing',
    'mdi-format-indent-increase', 'mdi-format-indent-decrease', 'mdi-format-list-bulleted',
    'mdi-format-list-numbered', 'mdi-format-quote-close', 'mdi-border-color',
    'mdi-text-box', 'mdi-title', 'mdi-functions', 'mdi-insert-chart',
    'mdi-code-tags', 'mdi-xml', 'mdi-language-html5', 'mdi-language-css3',
    'mdi-language-javascript', 'mdi-language-typescript', 'mdi-language-python'
  ],
  communication: [
    'mdi-email', 'mdi-email-open', 'mdi-email-outline', 'mdi-send', 'mdi-reply',
    'mdi-reply-all', 'mdi-forward', 'mdi-inbox', 'mdi-outbox', 'mdi-drafts',
    'mdi-message', 'mdi-message-text', 'mdi-message-reply', 'mdi-chat',
    'mdi-forum', 'mdi-comment', 'mdi-comment-outline', 'mdi-feedback',
    'mdi-phone', 'mdi-phone-in-talk', 'mdi-phone-missed', 'mdi-phone-forwarded',
    'mdi-voicemail', 'mdi-dialer-sip', 'mdi-contact-phone', 'mdi-contact-mail',
    'mdi-video-call', 'mdi-video-off', 'mdi-call-made', 'mdi-call-received',
    'mdi-call-split', 'mdi-call-merge', 'mdi-contacts', 'mdi-contact-plus'
  ],
  places: [
    'mdi-home', 'mdi-business', 'mdi-school', 'mdi-local-hospital', 'mdi-local-pharmacy',
    'mdi-local-grocery-store', 'mdi-local-mall', 'mdi-local-movies', 'mdi-local-gas-station',
    'mdi-local-parking', 'mdi-local-taxi', 'mdi-local-shipping', 'mdi-local-airport',
    'mdi-train', 'mdi-subway', 'mdi-directions-bus', 'mdi-directions-car',
    'mdi-directions-bike', 'mdi-directions-walk', 'mdi-map', 'mdi-place',
    'mdi-location-on', 'mdi-location-off', 'mdi-my-location', 'mdi-navigation',
    'mdi-store', 'mdi-restaurant', 'mdi-hotel', 'mdi-local-cafe', 'mdi-local-bar',
    'mdi-local-library', 'mdi-local-atm', 'mdi-local-post-office', 'mdi-local-police'
  ],
  system: [
    'mdi-cog', 'mdi-tune', 'mdi-wrench', 'mdi-build', 'mdi-construction',
    'mdi-bug', 'mdi-debug-step-over', 'mdi-console', 'mdi-terminal', 'mdi-code-braces',
    'mdi-database', 'mdi-server', 'mdi-cloud-outline', 'mdi-web', 'mdi-lan',
    'mdi-router', 'mdi-security', 'mdi-shield-check', 'mdi-shield-alert',
    'mdi-lock-outline', 'mdi-key-variant', 'mdi-vpn-key', 'mdi-fingerprint',
    'mdi-account-key', 'mdi-two-factor-authentication', 'mdi-backup-restore',
    'mdi-history', 'mdi-update', 'mdi-cached', 'mdi-sync-alert', 'mdi-sync-off'
  ],
  business: [
    'mdi-briefcase', 'mdi-business-outline', 'mdi-office-building', 'mdi-domain',
    'mdi-factory', 'mdi-store-24-hour', 'mdi-cash', 'mdi-credit-card',
    'mdi-bank', 'mdi-chart-line', 'mdi-chart-bar', 'mdi-chart-pie',
    'mdi-trending-up', 'mdi-trending-down', 'mdi-analytics', 'mdi-poll',
    'mdi-assessment', 'mdi-insert-chart-outlined', 'mdi-timeline',
    'mdi-calendar-today', 'mdi-event', 'mdi-schedule', 'mdi-access-time',
    'mdi-timer', 'mdi-alarm', 'mdi-work', 'mdi-work-outline'
  ]
};

// 获取当前分类的图标
const currentCategoryIcons = computed(() => {
  return iconLibrary[selectedCategory.value as keyof typeof iconLibrary] || [];
});

// 过滤后的图标
const filteredIcons = computed(() => {
  let icons = currentCategoryIcons.value;
  
  if (searchText.value) {
    const search = searchText.value.toLowerCase();
    icons = icons.filter(icon => icon.toLowerCase().includes(search));
  }
  
  return icons;
});

// 监听 modelValue 变化
watch(() => props.modelValue, (newValue) => {
  selectedIcon.value = newValue || '';
});

// 选择图标
const selectIcon = (icon: string) => {
  selectedIcon.value = icon;
};

// 确认选择
const onConfirm = () => {
  emit('update:modelValue', selectedIcon.value);
  emit('confirm', selectedIcon.value);
  emit('update:visible', false);
};

// 取消选择
const onCancel = () => {
  selectedIcon.value = props.modelValue || '';
  emit('update:visible', false);
};
</script>

<style scoped>
.icon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px;
}

.icon-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 8px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  background: white;
}

.icon-item:hover {
  border-color: #1976d2;
  background: #f5f5f5;
  transform: translateY(-2px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.icon-item.selected {
  border-color: #1976d2;
  background: #e3f2fd;
  color: #1976d2;
}

.icon-name {
  font-size: 10px;
  text-align: center;
  margin-top: 4px;
  word-break: break-all;
  line-height: 1.2;
  max-width: 100%;
}

.v-card-text {
  padding: 16px 24px;
}

.v-chip-group {
  max-width: 100%;
  overflow-x: auto;
}
</style> 